import { Layout, Menu, Typography, theme } from 'antd';
import { useState } from 'react';
import FileConverter from './components/FileConverter';
import FileCompressor from './components/FileCompressor';
import ImageCompressor from './components/ImageCompressor';
import ImageToPdf from './components/ImageToPdf';
import WatermarkRemover from './components/WatermarkRemover';
import './App.css';

const { Header, Content } = Layout;
const { Title } = Typography;

function App() {
  const [currentTool, setCurrentTool] = useState('fileConverter');
  const { token } = theme.useToken();

  const menuItems = [
    { key: 'fileConverter', label: '文件转换' },
    { key: 'fileCompressor', label: '文件压缩' },
    { key: 'imageCompressor', label: '图片压缩' },
    { key: 'imageToPdf', label: '图片转PDF' },
    { key: 'watermarkRemover', label: '去除图片水印' },
  ];

  const renderTool = () => {
    switch (currentTool) {
      case 'fileConverter':
        return <FileConverter />;
      case 'fileCompressor':
        return <FileCompressor />;
      case 'imageCompressor':
        return <ImageCompressor />;
      case 'imageToPdf':
        return <ImageToPdf />;
      case 'watermarkRemover':
        return <WatermarkRemover />;
      default:
        return <FileConverter />;
    }
  };

  return (
    <Layout className="layout">
      <div className="background-animation"></div>
      <Header className="header">
        <div className="logo-container">
          <div className="logo-circle">
            <span className="logo-text">Tools</span>
          </div>
          <Title level={3} className="site-title">
            在线工具箱
          </Title>
        </div>
        <Menu
          mode="horizontal"
          selectedKeys={[currentTool]}
          items={menuItems}
          onClick={({ key }) => setCurrentTool(key)}
          className="main-menu"
          style={{
            background: 'transparent',
          }}
        />
      </Header>
      <Content className="main-content">
        <div className="content-card">
          {renderTool()}
        </div>
      </Content>
      <div className="footer">
        <p>让工作更简单，让生活更轻松</p>
      </div>
    </Layout>
  );
}

export default App;
